<template>
  <div class="app-container2 guizepeizhi_warp">
    <div class="left_box">
      <commonTree />
    </div>
    <div class="right_box">
      <div class="right_main table_main">
        <div class="top_btns_wrap">
          <el-button class="warp-btn" icon="el-icon-plus"
            >加载设备故障树</el-button
          >
          <el-button class="warp-btn2" @click="onShowTreeDialogFn(true)">
            <img src="../../../assets/images/icon_zzz.png" alt="" />
            故障树预览</el-button
          >
        </div>
        <div class="line"></div>
        <el-table
          class="jk_common_table000"
          :data="tableData"
          style="width: 100%; height: 100%"
          height="style"
        >
          <el-table-column label="序号" align="center" width="100">
            <template slot-scope="scop">
              <div class="xuhao_warp">
                {{ (scop.$index + 1 + "").padStart(2, "0") }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="事件名称"> </el-table-column>
          <el-table-column prop="bh" label="事件编号"> </el-table-column>
          <el-table-column prop="type" label="事件类型"> </el-table-column>
          <el-table-column prop="cj" label="事件层级"> </el-table-column>
          <el-table-column prop="pz" label="测点配置"> </el-table-column>
          <el-table-column prop="desc" label="备注"> </el-table-column>
        </el-table>
        <div class="el-cbutton">
          <el-button class="btn">
            <img src="../../../assets/images/icon_btn1.png" alt="" />
            诊断规则保存</el-button
          >
          <el-button class="btn">
            <img src="../../../assets/images/icon_btn2.png" alt="" />
            诊断规则导出</el-button
          >
        </div>
        <el-table
          class="jk_common_table000 theme-darkd"
          :data="tableData2"
          style="width: 100%; height: 100%"
          height="style"
        >
          <el-table-column label="序号" align="center" width="100">
            <template slot-scope="scop">
              <div class="xuhao_warp">
                {{ (scop.$index + 1 + "").padStart(2, "0") }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="status"
            label="诊断状态"
            align="center"
            width="100"
          >
            <template slot-scope="scope">
              <div class="status_cls1" v-if="scope.row.status == 1">正常</div>
              <div class="status_cls2" v-if="scope.row.status == 2">异常</div>
              <div class="status_cls3" v-if="scope.row.status == 3">故障</div>
              <div class="status_cls4" v-if="scope.row.status == 4">离线</div>
            </template>
          </el-table-column>
          <el-table-column label="诊断公式" align="center">
            <template slot-scope="scope">
              <div class="gs_wrap">
                <el-input
                  class="jk_common_input001"
                  v-model="scope.row.gs"
                ></el-input>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog
      title="模块信息"
      :visible.sync="treeDialogFlag"
      width="80%"
      custom-class="jk_common_dialog000"
    >
      <span slot="title" class="dialog_header_wrap">故障树预览</span>
      <div class="tree_wrap">
        <treeBox :treeChartData="treeChartData" />
      </div>
    </el-dialog>
  </div>
</template>
<script>
import commonTree from "../../../components/commonTree";
import treeBox from "./components/treeBox.vue";
import * as echarts from "echarts";
export default {
  components: {
    commonTree,
    treeBox,
  },
  data() {
    return {
      tableData: [
        {
          name: "后台服务",
          bh: "A0001",
          type: "类型1",
          cj: "A级",
          pz: "10.10.1.1",
          desc: "2100",
        },
        {
          name: "后台服务",
          bh: "A0002",
          type: "类型3",
          cj: "A级",
          pz: "10.10.1.1",
          desc: "2100",
        },
        {
          name: "后台服务",
          bh: "A0003",
          type: "类型2",
          cj: "A级",
          pz: "10.10.1.1",
          desc: "2100",
        },
      ],
      tableData2: [
        {
          status: "1",
          gs: "公式1*工时2+1",
        },
        {
          status: "2",
          gs: "公式1*工时2+1",
        },
        {
          status: "3",
          gs: "公式1*工时2+1",
        },
        {
          status: "4",
          gs: "公式1*工时2+1",
        },
      ],
      treeDialogFlag: false,
      treeChartData: [
        {
          name: "本控制站(控制器软件)发生不可接受故障",
          relationType: 0,
          label: {
            backgroundColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: "#CDDBEC" },
              { offset: 0.02, color: "#CDDBEC" },
              { offset: 0.02, color: "#0649A1" },
              { offset: 1, color: "#0649A1" },
            ]), // 文字块的背景颜色
          },
          children: [
            {
              name: "一层控制站处理功能故障",
              label: {
                backgroundColor: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  1,
                  0,
                  [
                    { offset: 0, color: "#2C8F45" },
                    { offset: 0.02, color: "#2C8F45" },
                    { offset: 0.02, color: "#0C4553" },
                    { offset: 1, color: "#0C4553" },
                  ]
                ), // 文字块的背景颜色
              },
              children: [
                {
                  name: "主备控制器A、B同时故障",
                  label: {
                    backgroundColor: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      1,
                      0,
                      [
                        { offset: 0, color: "#2C8F45" },
                        { offset: 0.02, color: "#2C8F45" },
                        { offset: 0.02, color: "#0C4553" },
                        { offset: 1, color: "#0C4553" },
                      ]
                    ), // 文字块的背景颜色
                  },
                  children: [
                    {
                      name: "双路电源均故障",
                      label: {
                        backgroundColor: new echarts.graphic.LinearGradient(
                          0,
                          0,
                          1,
                          0,
                          [
                            { offset: 0, color: "#6E82A3" },
                            { offset: 0.02, color: "#6E82A3" },
                            { offset: 0.02, color: "#0B2D5D" },
                            { offset: 1, color: "#0B2D5D" },
                          ]
                        ), // 文字块的背景颜色
                      },
                    },
                    {
                      name: "配置管理故障",
                      label: {
                        backgroundColor: new echarts.graphic.LinearGradient(
                          0,
                          0,
                          1,
                          0,
                          [
                            { offset: 0, color: "#6E82A3" },
                            { offset: 0.02, color: "#6E82A3" },
                            { offset: 0.02, color: "#0B2D5D" },
                            { offset: 1, color: "#0B2D5D" },
                          ]
                        ), // 文字块的背景颜色
                      },
                    },
                    {
                      name: "程序运行故障",
                      label: {
                        backgroundColor: new echarts.graphic.LinearGradient(
                          0,
                          0,
                          1,
                          0,
                          [
                            { offset: 0, color: "#2C8F45" },
                            { offset: 0.02, color: "#2C8F45" },
                            { offset: 0.02, color: "#0C4553" },
                            { offset: 1, color: "#0C4553" },
                          ]
                        ), // 文字块的背景颜色
                      },
                      children: [
                        {
                          name: "程序运行故障",
                          label: {
                            backgroundColor: new echarts.graphic.LinearGradient(
                              0,
                              0,
                              1,
                              0,
                              [
                                { offset: 0, color: "#6E82A3" },
                                { offset: 0.02, color: "#6E82A3" },
                                { offset: 0.02, color: "#0B2D5D" },
                                { offset: 1, color: "#0B2D5D" },
                              ]
                            ), // 文字块的背景颜色
                          },
                        },
                        {
                          name: "逻辑未运行",
                          label: {
                            backgroundColor: new echarts.graphic.LinearGradient(
                              0,
                              0,
                              1,
                              0,
                              [
                                { offset: 0, color: "#6E82A3" },
                                { offset: 0.02, color: "#6E82A3" },
                                { offset: 0.02, color: "#0B2D5D" },
                                { offset: 1, color: "#0B2D5D" },
                              ]
                            ), // 文字块的背景颜色
                          },
                        },
                        {
                          name: "程序执行异常",
                          label: {
                            backgroundColor: new echarts.graphic.LinearGradient(
                              0,
                              0,
                              1,
                              0,
                              [
                                { offset: 0, color: "#6E82A3" },
                                { offset: 0.02, color: "#6E82A3" },
                                { offset: 0.02, color: "#0B2D5D" },
                                { offset: 1, color: "#0B2D5D" },
                              ]
                            ), // 文字块的背景颜色
                          },
                        },
                      ],
                    },
                    {
                      name: "网络风暴故障",
                      label: {
                        backgroundColor: new echarts.graphic.LinearGradient(
                          0,
                          0,
                          1,
                          0,
                          [
                            { offset: 0, color: "#6E82A3" },
                            { offset: 0.02, color: "#6E82A3" },
                            { offset: 0.02, color: "#0B2D5D" },
                            { offset: 1, color: "#0B2D5D" },
                          ]
                        ), // 文字块的背景颜色
                      },
                    },
                  ],
                },
                {
                  name: "主备控制器A、B冗余功能故障",
                  label: {
                    backgroundColor: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      1,
                      0,
                      [
                        { offset: 0, color: "#2C8F45" },
                        { offset: 0.02, color: "#2C8F45" },
                        { offset: 0.02, color: "#0C4553" },
                        { offset: 1, color: "#0C4553" },
                      ]
                    ), // 文字块的背景颜色
                  },
                  children: [
                    {
                      name: "组态工程缺失",
                      label: {
                        backgroundColor: new echarts.graphic.LinearGradient(
                          0,
                          0,
                          1,
                          0,
                          [
                            { offset: 0, color: "#6E82A3" },
                            { offset: 0.02, color: "#6E82A3" },
                            { offset: 0.02, color: "#0B2D5D" },
                            { offset: 1, color: "#0B2D5D" },
                          ]
                        ), // 文字块的背景颜色
                      },
                    },
                    {
                      name: "主备控制器操作系统不一致",
                      label: {
                        backgroundColor: new echarts.graphic.LinearGradient(
                          0,
                          0,
                          1,
                          0,
                          [
                            { offset: 0, color: "#6E82A3" },
                            { offset: 0.02, color: "#6E82A3" },
                            { offset: 0.02, color: "#0B2D5D" },
                            { offset: 1, color: "#0B2D5D" },
                          ]
                        ), // 文字块的背景颜色
                      },
                    },
                    {
                      name: "主备控制器驱动程序不一致",
                      label: {
                        backgroundColor: new echarts.graphic.LinearGradient(
                          0,
                          0,
                          1,
                          0,
                          [
                            { offset: 0, color: "#6E82A3" },
                            { offset: 0.02, color: "#6E82A3" },
                            { offset: 0.02, color: "#0B2D5D" },
                            { offset: 1, color: "#0B2D5D" },
                          ]
                        ), // 文字块的背景颜色
                      },
                    },
                    {
                      name: "主备控制器应用程序不一致",
                      label: {
                        backgroundColor: new echarts.graphic.LinearGradient(
                          0,
                          0,
                          1,
                          0,
                          [
                            { offset: 0, color: "#6E82A3" },
                            { offset: 0.02, color: "#6E82A3" },
                            { offset: 0.02, color: "#0B2D5D" },
                            { offset: 1, color: "#0B2D5D" },
                          ]
                        ), // 文字块的背景颜色
                      },
                    },
                    {
                      name: "主备控制器组态数据比对不一致",
                      label: {
                        backgroundColor: new echarts.graphic.LinearGradient(
                          0,
                          0,
                          1,
                          0,
                          [
                            { offset: 0, color: "#6E82A3" },
                            { offset: 0.02, color: "#6E82A3" },
                            { offset: 0.02, color: "#0B2D5D" },
                            { offset: 1, color: "#0B2D5D" },
                          ]
                        ), // 文字块的背景颜色
                      },
                    },
                    {
                      name: "主备控制器FPGA程序不一致",
                      label: {
                        backgroundColor: new echarts.graphic.LinearGradient(
                          0,
                          0,
                          1,
                          0,
                          [
                            { offset: 0, color: "#6E82A3" },
                            { offset: 0.02, color: "#6E82A3" },
                            { offset: 0.02, color: "#0B2D5D" },
                            { offset: 1, color: "#0B2D5D" },
                          ]
                        ), // 文字块的背景颜色
                      },
                    },
                  ],
                },
              ],
            },
            {
              name: "本控制站内通信功能故障",
              label: {
                backgroundColor: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  1,
                  0,
                  [
                    { offset: 0, color: "#2C8F45" },
                    { offset: 0.02, color: "#2C8F45" },
                    { offset: 0.02, color: "#0C4553" },
                    { offset: 1, color: "#0C4553" },
                  ]
                ), // 文字块的背景颜色
              },
              children: [
                {
                  name: "同步网(第三以太网)通信故障",
                  label: {
                    backgroundColor: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      1,
                      0,
                      [
                        { offset: 0, color: "#6E82A3" },
                        { offset: 0.02, color: "#6E82A3" },
                        { offset: 0.02, color: "#0B2D5D" },
                        { offset: 1, color: "#0B2D5D" },
                      ]
                    ), // 文字块的背景颜色
                  },
                },
                {
                  name: "总线AB双路通信状态故障",
                  label: {
                    backgroundColor: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      1,
                      0,
                      [
                        { offset: 0, color: "#6E82A3" },
                        { offset: 0.02, color: "#6E82A3" },
                        { offset: 0.02, color: "#0B2D5D" },
                        { offset: 1, color: "#0B2D5D" },
                      ]
                    ), // 文字块的背景颜色
                  },
                },
              ],
            },
            {
              name: "本控制站与外部通讯故障",
              label: {
                backgroundColor: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  1,
                  0,
                  [
                    { offset: 0, color: "#2C8F45" },
                    { offset: 0.02, color: "#2C8F45" },
                    { offset: 0.02, color: "#0C4553" },
                    { offset: 1, color: "#0C4553" },
                  ]
                ), // 文字块的背景颜色
              },
              children: [
                {
                  name: "AB双网故障",
                  label: {
                    backgroundColor: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      1,
                      0,
                      [
                        { offset: 0, color: "#6E82A3" },
                        { offset: 0.02, color: "#6E82A3" },
                        { offset: 0.02, color: "#0B2D5D" },
                        { offset: 1, color: "#0B2D5D" },
                      ]
                    ), // 文字块的背景颜色
                  },
                },
              ],
            },
            {
              name: "时钟故障",
              label: {
                backgroundColor: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  1,
                  0,
                  [
                    { offset: 0, color: "#2C8F45" },
                    { offset: 0.02, color: "#2C8F45" },
                    { offset: 0.02, color: "#0C4553" },
                    { offset: 1, color: "#0C4553" },
                  ]
                ), // 文字块的背景颜色
              },
              children: [
                {
                  name: "B码通道PPS状态异常",
                  label: {
                    backgroundColor: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      1,
                      0,
                      [
                        { offset: 0, color: "#6E82A3" },
                        { offset: 0.02, color: "#6E82A3" },
                        { offset: 0.02, color: "#0B2D5D" },
                        { offset: 1, color: "#0B2D5D" },
                      ]
                    ), // 文字块的背景颜色
                  },
                },
                {
                  name: "B码通道码状态异常",
                  label: {
                    backgroundColor: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      1,
                      0,
                      [
                        { offset: 0, color: "#6E82A3" },
                        { offset: 0.02, color: "#6E82A3" },
                        { offset: 0.02, color: "#0B2D5D" },
                        { offset: 1, color: "#0B2D5D" },
                      ]
                    ), // 文字块的背景颜色
                  },
                },
                {
                  name: "B码双通道故障",
                  label: {
                    backgroundColor: new echarts.graphic.LinearGradient(
                      0,
                      0,
                      1,
                      0,
                      [
                        { offset: 0, color: "#6E82A3" },
                        { offset: 0.02, color: "#6E82A3" },
                        { offset: 0.02, color: "#0B2D5D" },
                        { offset: 1, color: "#0B2D5D" },
                      ]
                    ), // 文字块的背景颜色
                  },
                },
              ],
            },
          ],
        },
      ],
    };
  },
  methods: {
    onShowTreeDialogFn(flag) {
      this.treeDialogFlag = flag;
    },
  },
};
</script>
<style lang="scss" scoped>
.guizepeizhi_warp {
  width: 100%;
  display: flex;
  ::v-deep .table_main {
    flex: 1 1 auto;
    width: 100%;
    height: 0;
    .xuhao_warp {
      display: block;
      margin: 0 auto;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      line-height: 28px;
      text-align: center;
      font-size: 14px;
      color: #91c5ff;
      background: linear-gradient(
        0deg,
        #3d547d 0%,
        rgba(52, 72, 109, 0) 49%,
        rgba(52, 72, 109, 0) 100%
      );
    }
  }
  .left_box {
    flex: 0 0 auto;
  }
  .right_box {
    margin-left: 20px;
    width: 0;
    flex: 1 1 auto;
    box-sizing: border-box;
    .right_main {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      background: linear-gradient(
        180deg,
        rgba(21, 52, 104, 0.3) 0%,
        rgba(12, 29, 57, 0.3) 100%
      );
      padding: 20px;
      .top_btns_wrap {
        display: flex;
        justify-content: space-between;
        margin-bottom: 23px;
        .warp-btn {
          background: inherit;
          width: 170px;
          border: 1px solid #476cb3;
          border-radius: 4px;
          color: #fff;
          margin-top: 25px;
          font-size: 16px;
          font-family: Alibaba PuHuiTi;
          font-weight: 400;
        }
        .warp-btn2 {
          border: 0;
          background: #046e63;
          width: 150px;
          border-radius: 4px;
          color: #fff;
          margin-top: 25px;
          display: flex;
          justify-content: center;
          align-content: center;
          font-size: 16px;
          font-family: Alibaba PuHuiTi;
          font-weight: 400;
          img {
            display: inline-block;
            vertical-align: middle;
            margin-right: 5px;
          }
        }
      }
      .line {
        width: 100%;
        margin: 0 auto;
        background: #2d3c65;
        height: 2px;
        position: relative;
        margin-bottom: 21px;
        &::before {
          content: "";
          width: 160px;
          height: 2px;
          position: absolute;
          left: 0;
          top: 0;
          background: #0065e3;
        }
      }
      .el-cbutton {
        display: flex;
        justify-content: right;
        .btn {
          width: 150px;
          background: #004dad;
          border-radius: 4px;
          font-size: 16px;
          font-family: Alibaba PuHuiTi;
          font-weight: 400;
          color: #ffffff;
          border: 0;
          margin: 21px 0;
          margin-left: 15px;
          display: flex;
          justify-content: center;
          align-content: center;
          img {
            display: inline-block;
            vertical-align: middle;
            margin-right: 5px;
            margin-top: -3px;
          }
        }
      }
      .status_cls1 {
        color: #00ff00;
        position: relative;

        &::before {
          position: absolute;
          content: "";
          width: 8px;
          height: 8px;
          background: #00ff00;
          opacity: 0.8;
          border-radius: 50%;
          right: 8px;
          top: 6px;
        }
        &::after {
          position: absolute;
          content: "";
          width: 16px;
          height: 16px;
          background: #00ff00;
          opacity: 0.14;
          border-radius: 50%;
          border-radius: 50%;
          right: 4px;
          top: 2px;
        }
      }
      .status_cls2 {
        color: #ffca4b;
        position: relative;
        &::before {
          position: absolute;
          content: "";
          width: 8px;
          height: 8px;
          background: #ffca4b;
          opacity: 0.8;
          border-radius: 50%;
          right: 8px;
          top: 6px;
        }
        &::after {
          position: absolute;
          content: "";
          width: 16px;
          height: 16px;
          background: #ffca4b;
          opacity: 0.14;
          border-radius: 50%;
          border-radius: 50%;
          right: 4px;
          top: 2px;
        }
      }
      .status_cls3 {
        color: #ff552e;
        position: relative;
        &::before {
          position: absolute;
          content: "";
          width: 8px;
          height: 8px;
          background: #ff552e;
          opacity: 0.8;
          border-radius: 50%;
          right: 8px;
          top: 6px;
        }
        &::after {
          position: absolute;
          content: "";
          width: 16px;
          height: 16px;
          background: #ff552e;
          opacity: 0.14;
          border-radius: 50%;
          border-radius: 50%;
          right: 4px;
          top: 2px;
        }
      }
      .status_cls4 {
        color: #c7d8ff;
        position: relative;
        &::before {
          position: absolute;
          content: "";
          width: 8px;
          height: 8px;
          background: #c7d8ff;
          opacity: 0.8;
          border-radius: 50%;
          right: 8px;
          top: 6px;
        }
        &::after {
          position: absolute;
          content: "";
          width: 16px;
          height: 16px;
          background: #c7d8ff;
          opacity: 0.14;
          border-radius: 50%;
          border-radius: 50%;
          right: 4px;
          top: 2px;
        }
      }
    }
  }
}
::v-deep .gs_wrap {
  width: 80%;
  margin: 0 auto;
  .el-input__inner {
    color: #91c5ff;
    text-align: center;
    border-color: transparent !important;
  }
}

::v-deep .jk_common_dialog000 {
  .el-dialog__header {
    width: 100%;
    height: 60px;
    background: url("../../../assets/images/dialog000_bg_title.png") center
      center no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .dialog_header_wrap {
      font-size: 18px;
      font-family: Alibaba PuHuiTi;
      color: #fff;
      padding-bottom: 14px;
      text-shadow: 0px 2px 8px rgba(5, 28, 55, 0.42);
    }
  }
  .el-dialog__body {
    .tree_wrap {
      width: 100%;
      height: 540px;
    }
  }
}
</style>
